<template>
    <!-- 模板部分，提供一个按钮用于触发文件下载 -->
    <div>
    <h4>简单表格</h4>
    <table border="1" style="width: 100%; text-align: left;">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
    <button @click="downloadFile">下载文件</button>
  </template>
  <script>
  import axios from 'axios'; // 引入axios库用于发送HTTP请求
  export default {
    methods: {
      // 下载文件的方法
      downloadFile(params) {
        // 使用axios发送GET请求，请求后端接口
        axios({
          url: 'https://example.com/api/download', // 后端提供的文件下载接口
          method: 'get', // 请求方法为GET
          responseType: 'blob', // 指定响应类型为blob，用于处理二进制数据
          //params:params, //可传参
        }).then(response => {
          // 请求成功，处理响应数据
          const url = window.URL.createObjectURL(new Blob([response.data])); // 创建一个Blob对象，并生成一个URL
          const link = document.createElement('a'); // 创建一个临时的<a>标签用于下载
          link.href = url; // 设置<a>标签的href属性为Blob对象的URL
          link.setAttribute('download', '文件名.xlsx'); // 设置下载文件名，扩展名根据实际文件类型设置
          document.body.appendChild(link); // 将<a>标签添加到页面中，以便可以点击
          link.click(); // 模拟点击<a>标签，触发下载
          document.body.removeChild(link); // 下载触发后，从页面中移除<a>标签
          window.URL.revokeObjectURL(url); // 释放创建的URL对象，避免内存泄漏
        }).catch(error => {
          // 请求失败，处理错误
          console.error('下载文件失败:', error);
          alert('下载文件失败，请稍后重试或联系管理员');
        });
      },
    },
  };

  // //如果需要指定类型  

  // excel类型:new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
  // pdf类型 { type: 'application/pdf'}
    
  // word类型 { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
  
  // zip类型  { type: 'application/zip'}
  </script>